<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history对象</title>
</head>
<body>
<h3>history对象</h3>
<p>
    history 的数据类型是对象，主要管理历史记录， <br>
    该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
</p>
<h4>常用属性和方法</h4>
<p>
    back() 可以后退功能 <br>
    forward() 前进功能 <br>
    go(参数) 前进后退功能: 参数如果是1 前进1个页面. 如果是-1 后退1个页面
</p>
<p>history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。</p>
<hr>

<!--额外说明: 把上面的的内容去掉就才可以跳转...........-->

<!--2个按钮, 演示页面前进和后退-->
<button>后退</button>
<button>前进</button>

<script>
    // 获取DOM元素
    const 后退 = document.querySelector('button:nth-child(1)') // 选择第1个,button标签
    // const 后退 = document.querySelector('button:first-child') // 选择第1个,button标签
    const 前进 = 后退.nextElementSibling // 下一个兄弟节点

    // 监控 鼠标点击事件
    后退.addEventListener('click', function () {
        // 后退一步
        // history.back()
        history.go(-1)
    })
    前进.addEventListener('click', function () {
        // 前进一步
        // history.forward()
        history.go(1)
    })
</script>
</body>
</html>